﻿@{
    ViewBag.Title = "Add";
}

@section CustomScripts
{
    <script src="@Url.Content("~/Assets/plugins/typeahead/typeahead.jquery.min.js")"></script>
    <script src="@Url.Content("~/Assets/plugins/password/pStrength.jquery.js")"></script>
    <script src="@Url.Content("~/Assets/plugins/password/pGenerator.jquery.js")"></script>

    <script type="text/javascript">
        $(function () {
            $("#hf-owner").typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'states',
                displayKey: 'value',
                source: function (query, callback) {
                    return $.get("@Url.Action("GetAccOwnerSource", "Common")", { query: query }, function (data) {
                        for (var i = 0; i < data.Options.length; i++) {
                            data.Options[i] = { value: data.Options[i] };
                        }
                        return callback(data.Options);
                    });
                }
            });

            $(".txt-password").pStrength({
                'backgrounds': [
                    ['#fff', '#000'],
                    ['#cc3333', '#3cc'],
                    ['#cc6666', '#c99'],
                    ['#ff9999', '#066'],
                    ['#e0941c', '#fff'],
                    ['#e8a53a', '#fff'],
                    ['#eab259', '#fff'],
                    ['#efd09e', '#fff'],
                    ['#ccffcc', '#303'],
                    ['#66cc66', '#939'],
                    ['#339933', '#c6c'],
                    ['#006600', '#f9f'],
                    ['#105610', '#FFF']
                ]
            });

            $(".lk-genpass").click(function () {
                var self = $(this);

                var elem = $("<a href='#'></a>");
                elem.pGenerator({
                    'bind': 'click',
                    'passwordElement': null,
                    'displayElement': null,
                    'passwordLength': 9,
                    'uppercase': true,
                    'lowercase': true,
                    'numbers': true,
                    'specialChars': false,
                    'onPasswordGenerated': function (p) {
                        self.parent().find('.txt-password').val(p).change();
                    }
                });
                elem.click();
            });

            $("#btn-add-secq").click(function () {
                var count = $("#panel-secq .mar-hr-10").length;
                $.get("@Url.Action("NewSecureQuestion", "Account")", { questionNumber: count }, function (data) {
                    $("#panel-secq").append(data);
                    count = $("#panel-secq .mar-hr-10").length;
                    if (count >= 3) {
                        $("#btn-add-secq").attr("disabled", "disabled");
                    }
                });
            });

            $("#btn-add-prop").click(function () {
                var count = $("#panel-prop .mar-hr-10").length;
                $.get("@Url.Action("NewProperty", "Account")", { propNumber: count }, function (data) {
                    $("#panel-prop").append(data);
                });
            });

            $("#btn-add-submit").click(function () {
                var secureQuestions = new Array();
                $("#panel-secq .mar-hr-10").each(function (index, element) {
                    var question = $(element).find("[name='SecureQuestion']").val();
                    var answer = $(element).find("[name='SecureAnswer']").val();

                    if (question == "" && answer == "") return;

                    secureQuestions.push({
                        SecureQuestion: question,
                        SecureAnswer: answer
                    });
                });

                var properties = new Array();
                $("#panel-prop .mar-hr-10").each(function (index, element) {
                    var key = $(element).find("[name='PropKey']").val();
                    var value = $(element).find("[name='PropValue']").val();

                    if (key == "" && value == "") return;

                    properties.push({
                        Key: key,
                        Value: value
                    });
                });

                var request = {
                    AccountOwner: $("#hf-owner").val(),
                    Account: $("#hf-account").val(),
                    Password: $("#hf-password").val(),
                    PIN: $("#hf-pin").val(),
                    SecureQuestions: secureQuestions,
                    Properties: properties
                };

                $.post("@Url.Action("SaveNewAccount", "Account")", JSON.stringify(request))
                    .done(function (data) {
                        alert("Saved");
                    });
            });

            $("#btn-add-reset").click(function () {
                document.getElementById("frm-add").reset();
            });

            $("#btn-add-secq").click();
            $("#btn-add-prop").click();
        });

    </script>
}

<ol class="breadcrumb">
    <li><a href="@Url.Action("Index", "Dashboard")">Home</a></li>
    <li><a href="@Url.Action("AccountGrid", "Account")">Account</a></li>
    <li class="active"><a href="@Url.Action("Add", "Account")">New Account</a></li>
</ol>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div><strong>New Account</strong></div>
            </div>
            <div class="panel-body">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <form id="frm-add" class="form-horizontal ">
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="hf-owner">Account Owner</label>
                            <div class="col-md-9">
                                <input type="text" id="hf-owner" name="Owner" class="form-control">
                                <span class="help-block">Please enter the account owner(web site name)</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="hf-account">Account</label>
                            <div class="col-md-9">
                                <input type="text" id="hf-account" name="Account" class="form-control">
                                <span class="help-block">Please enter the account</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="hf-password">Password</label>
                            <div class="col-md-9">
                                <input type="text" id="hf-password" name="Account" class="form-control txt-password">
                                <a class="btn btn-sm btn-link lk-genpass" href="#">Help me to generate one</a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="hf-pin">PIN</label>
                            <div class="col-md-9">
                                <input type="text" id="hf-pin" name="PIN" class="form-control txt-password">
                                <a class="btn btn-sm btn-link lk-genpass" href="#">Help me to generate one</a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Secure Questions</label>
                            <div class="col-md-9">
                                <div id="panel-secq" class="panel" style="margin: -10px inherit 20px inherit;">
                                </div>
                                <a id="btn-add-secq" class="btn btn-primary" href="#">
                                    <i class="fa fa-plus"></i>
                                    New
                                </a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Custom Properties</label>
                            <div class="col-md-9">
                                <div id="panel-prop" class="panel" style="margin: -10px inherit 20px inherit;">
                                </div>
                                <a id="btn-add-prop" class="btn btn-primary" href="#">
                                    <i class="fa fa-plus"></i>
                                    Add
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="panel-footer">
                <button id="btn-add-submit" type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
                <button id="btn-add-reset" type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
            </div>
        </div>
    </div>
</div>
